import { ProForm } from '@ant-design/pro-components';
import { Form, Input, Select, Upload, Image, Row, Col, Space } from "antd";
import { useDispatch, useSelector } from "@umijs/max"
import { useEffect,useRef } from "react";
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';
export default function InterviewForm(props) {
    const editorRef = useRef()
    const formRef = useRef()
    const dispatch = useDispatch();
    const { typeList } = useSelector(state => state.type)
    useEffect(() => {
        if (typeList.length === 0) {
            // 请求数据
            dispatch({
                type: 'type/_initList'
            })
        } else {
            console.log("已经有数据不用请求")
        }
    }, [])
    useEffect(()=>{
        // 当前模式是编辑 需要回填数据
        formRef.current.setFieldsValue(props.initData);
        if(props.type==='edit'){
            editorRef.current.getInstance().setHTML(props.initData.interviewContent)
        }
    },[props.initData])
    const options = typeList.map(item => {
        return {
            value: item._id,
            label: item.typeName
        }
    })
    function handleFormFinish(data) {
        // 拿到editor里面的内容
        const content = editorRef.current.getInstance().getHTML()
        data.interviewContent = content;
        props.submit({...data})

    }
    function validateEditor(val){
        const content = editorRef.current.getInstance().getHTML()
        const reg = /<[\/]?\w+>/g
        if (content.replaceAll(reg, '').trim() === '' || content.replaceAll(reg, '').trim() === '请填写题目内容') {
            return Promise.reject('题目内容错误')
        } else {
            return Promise.resolve()
        }
    }
    return (
        <ProForm
            formRef={formRef}
            submitter={{
                render:(props,doms)=>{
                    return (
                        <Row>
                        <Col span={16} offset={2}>
                            <Space>{doms}</Space>
                        </Col>
                    </Row> 
                    )
                }
            }}
            onFinish={handleFormFinish}
            layout="horizontal"
            labelCol={{
                span: 2,
            }}
            wrapperCol={{
                span: 20,
            }}
        >
            <Form.Item
                label="题目标题"
                name="interviewTitle"
                rules={[
                    {
                        required: true,
                        message: '请输入题目标题',
                    },

                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="题目分类" name="typeId" rules={[
                {
                    required: true,
                    message: '请选择题目分类',
                },


            ]}>
                <Select style={{
                    width: 200,
                }} options={options} />
            </Form.Item>
            <Form.Item validateTrigger="onBlur" validateFirst={true} label="题目内容" name="interviewContent" rules={[
                {
                    required: true,
                    message: '请输入题目内容',
                },
                {
                    validator:(_,value)=>{
                        return validateEditor(value)
                    }
                }

            ]}>
                <Editor 
                ref={editorRef}
                 initialValue="请填写题目内容"
                 previewStyle="vertical"
                 height="600px"
                 initialEditType="markdown"
                 useCommandShortcut={true}/>
            </Form.Item>
        </ProForm>)
}